// 面向对象 三部曲
// 1 构造函数
function Tab( obj ){
    this.tit = obj.tit
    this.con = obj.con
    this.curI = obj.curI

    // 初始化  必须的 即 页面加载完成需要具备的功能
    this.init()
}


// 2 原型对象
Tab.prototype.init =  function(){
    // 根据下标  展示页面
    this.initShow()
    // 绑定事件
    this.bindEvent()
}

Tab.prototype.initShow = function(){
    this.tit[this.curI].classList.add("active")
    this.con[this.curI].classList.add("show")
}
Tab.prototype.bindEvent = function(){
    this.tit.forEach((span , i) => {
        // 事件程序中 this指向绑定事件的元素 即 事件源
        // 箭头函数 没有this  若出现 指向父级挂靠的环境对象
        span.addEventListener("click" , () => {
            console.log(this)
            // 排他
            this.tit[this.curI].classList.remove("active")
            this.con[this.curI].classList.remove("show")

            this.curI = i;

            this.tit[this.curI].classList.add("active")
            this.con[this.curI].classList.add("show")
        })
    })
}



// 3 实例化对象
var tab1 = new Tab({
    tit : [...document.querySelectorAll(".box1 span")] ,
    con : [...document.querySelectorAll(".box1 .cons div")] ,
    curI : 0, 
    // data : 
})

var tab2 = new Tab({
    tit : [...document.querySelectorAll(".box2 span")] ,
    con : [...document.querySelectorAll(".box2 .cons div")] ,
    curI  : 2,
})

var tab3 = new Tab({
    tit : [...document.querySelectorAll(".box3 span")] ,
    con : [...document.querySelectorAll(".box3 .cons div")] ,
    curI  : 1,
})

console.log(tab1)
console.log(tab2)